<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta charset="utf-8" />
<title>wicket-foundation</title>
</head>
<body>
<wicket:extend>

    <div class="row">
        <h1 id="typography">Typography</h1>
        <h3 class="subheader">Typography in Foundation 5 is meant
            to make your life easier by providing clean, attractive,
            simple default styles for all of the most basic
            typographical elements.</h3>

        <hr>
        <h3 id="headers">Headers</h3>
        <p>Foundation includes styles for all of the header elements
            that are balanced and based on a modular scale (though
            modular-scale is not a dependency of Foundation).</p>
        <div>
            <div>
                <h4>HTML</h4>
                
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">h1</span>&gt;</span>h1. This is a very large header.<span class="tag">&lt;/<span class="title">h1</span>&gt;</span>
<span class="tag">&lt;<span class="title">h2</span>&gt;</span>h2. This is a large header.<span class="tag">&lt;/<span class="title">h2</span>&gt;</span>
<span class="tag">&lt;<span class="title">h3</span>&gt;</span>h3. This is a medium header.<span class="tag">&lt;/<span class="title">h3</span>&gt;</span>
<span class="tag">&lt;<span class="title">h4</span>&gt;</span>h4. This is a moderate header.<span class="tag">&lt;/<span class="title">h4</span>&gt;</span>
<span class="tag">&lt;<span class="title">h5</span>&gt;</span>h5. This is a small header.<span class="tag">&lt;/<span class="title">h5</span>&gt;</span> 
<span class="tag">&lt;<span class="title">h6</span>&gt;</span>h6. This is a tiny header.<span class="tag">&lt;/<span class="title">h6</span>&gt;</span>
</div></code>
</pre>

            </div>
            <div>
                <h4>Rendered HTML</h4>
                <div class="type-demo">
                    <h1>h1. This is a very large header.</h1>
                    <h2>h2. This is a large header.</h2>
                    <h3>h3. This is a medium header.</h3>
                    <h4>h4. This is a moderate header.</h4>
                    <h5>h5. This is a small header.</h5>
                    <h6>h6. This is a tiny header.</h6>
                </div>
            </div>
        </div>

        <hr>
        <h3 id="subheaders">Subheaders</h3>
        <p>Lighten up your headers by adding a class of .subheader
            to any header element.</p>
        <div>
            <div>
                <h4>HTML</h4>
                
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">h1</span> <span class="attribute">class</span>=<span class="value">&quot;subheader&quot;</span>&gt;</span>h1.subheader<span class="tag">&lt;/<span class="title">h1</span>&gt;</span>
<span class="tag">&lt;<span class="title">h2</span> <span class="attribute">class</span>=<span class="value">&quot;subheader&quot;</span>&gt;</span>h2.subheader<span class="tag">&lt;/<span class="title">h2</span>&gt;</span>
<span class="tag">&lt;<span class="title">h3</span> <span class="attribute">class</span>=<span class="value">&quot;subheader&quot;</span>&gt;</span>h3.subheader<span class="tag">&lt;/<span class="title">h3</span>&gt;</span>
<span class="tag">&lt;<span class="title">h4</span> <span class="attribute">class</span>=<span class="value">&quot;subheader&quot;</span>&gt;</span>h4.subheader<span class="tag">&lt;/<span class="title">h4</span>&gt;</span>
<span class="tag">&lt;<span class="title">h5</span> <span class="attribute">class</span>=<span class="value">&quot;subheader&quot;</span>&gt;</span>h5.subheader<span class="tag">&lt;/<span class="title">h5</span>&gt;</span>
<span class="tag">&lt;<span class="title">h6</span> <span class="attribute">class</span>=<span class="value">&quot;subheader&quot;</span>&gt;</span>h6.subheader<span class="tag">&lt;/<span class="title">h6</span>&gt;</span>
</div></code>
</pre>

            </div>
            <div>
                <h4>Rendered HTML</h4>
                <div class="type-demo">

                    <h1 class="subheader">h1.subheader</h1>
                    <h2 class="subheader">h2.subheader</h2>
                    <h3 class="subheader">h3.subheader</h3>
                    <h4 class="subheader">h4.subheader</h4>
                    <h5 class="subheader">h5.subheader</h5>
                    <h6 class="subheader">h6.subheader</h6>

                </div>
            </div>
        </div>

        <hr>
        <h3 id="small-header-segments">Small Header Segments</h3>
        <p>
            By inserting a
            <code>small</code>
            element into a header Foundation will scale the header font
            size down for an inline element, allowing you to use this
            for subtitles or other secondary header text.
        </p>
        <div>
            <div>
                <h4>HTML</h4>
                
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">h1</span>&gt;</span>h1. <span class="tag">&lt;<span class="title">small</span>&gt;</span>Small segment header.<span class="tag">&lt;/<span class="title">small</span>&gt;</span><span class="tag">&lt;/<span class="title">h1</span>&gt;</span>
<span class="tag">&lt;<span class="title">h2</span>&gt;</span>h2. <span class="tag">&lt;<span class="title">small</span>&gt;</span>Small segment header.<span class="tag">&lt;/<span class="title">small</span>&gt;</span><span class="tag">&lt;/<span class="title">h2</span>&gt;</span>
<span class="tag">&lt;<span class="title">h3</span>&gt;</span>h3. <span class="tag">&lt;<span class="title">small</span>&gt;</span>Small segment header.<span class="tag">&lt;/<span class="title">small</span>&gt;</span><span class="tag">&lt;/<span class="title">h3</span>&gt;</span>
<span class="tag">&lt;<span class="title">h4</span>&gt;</span>h4. <span class="tag">&lt;<span class="title">small</span>&gt;</span>Small segment header.<span class="tag">&lt;/<span class="title">small</span>&gt;</span><span class="tag">&lt;/<span class="title">h4</span>&gt;</span>
<span class="tag">&lt;<span class="title">h5</span>&gt;</span>h5. <span class="tag">&lt;<span class="title">small</span>&gt;</span>Small segment header.<span class="tag">&lt;/<span class="title">small</span>&gt;</span><span class="tag">&lt;/<span class="title">h5</span>&gt;</span>
<span class="tag">&lt;<span class="title">h6</span>&gt;</span>h6. <span class="tag">&lt;<span class="title">small</span>&gt;</span>Small segment header.<span class="tag">&lt;/<span class="title">small</span>&gt;</span><span class="tag">&lt;/<span class="title">h6</span>&gt;</span>
</div></code>
</pre>

            </div>
            <div>
                <h4>Rendered HTML</h4>
                <div class="type-demo">
                    <h1>
                        h1. <small>Small segment header.</small>
                    </h1>
                    <h2>
                        h2. <small>Small segment header.</small>
                    </h2>
                    <h3>
                        h3. <small>Small segment header.</small>
                    </h3>
                    <h4>
                        h4. <small>Small segment header.</small>
                    </h4>
                    <h5>
                        h5. <small>Small segment header.</small>
                    </h5>
                    <h6>
                        h6. <small>Small segment header.</small>
                    </h6>
                </div>
            </div>
        </div>

        <hr>
        <h3 id="paragraphs">Paragraphs</h3>
        <p>
            This is a paragraph. Paragraphs are preset with a font size,
            line height and spacing to match the overall vertical
            rhythm. To show what a paragraph looks like this needs a
            little more content &#45;&#45; so, did you know that there
            are storms occurring on Jupiter that are larger than the
            Earth? Pretty cool. Wrap
            <code>strong</code>
            around type to <strong>make it bold!</strong> You can also
            use
            <code>em</code>
            to <em>italicize your words</em>.
        </p>
        <h4>HTML</h4>

<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span>&gt;</span>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to <span class="tag">&lt;<span class="title">strong</span>&gt;</span>make it bold!<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>. You can also use em to <span class="tag">&lt;<span class="title">em</span>&gt;</span>italicize your words<span class="tag">&lt;/<span class="title">em</span>&gt;</span>.<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
</div></code>
</pre>

        <hr>
        <h3 id="links">Links</h3>
        <p>
            Links are very standard, and the <a
                href="http://www.youtube.com/watch?v=zT2aVoUkSDg">color
                is preset</a> to the Foundation primary color.
        </p>
        <h4>HTML</h4>

<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span>&gt;</span>Links are very standard, and the <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://www.youtube.com/watch?v=zT2aVoUkSDg"</span>&gt;</span>color is preset<span class="tag">&lt;/<span class="title">a</span>&gt;</span> to the Foundation primary color.<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
</div></code>
</pre>

        <hr>
        <h3 id="lists">Lists</h3>
        <p>Lists are helpful for, well, lists of things. Didn&#39;t
            see that coming did you! There are baked-in styles for a
            number of different unordered list styles, as well as
            ordered and definition lists.</p>
        <div>
            <div>
                <h4>HTML</h4>
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">&quot;disc&quot;</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item with a much longer description or more content.<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item
    <span class="tag">&lt;<span class="title">ul</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested list item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested list item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested list item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
<span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
</div></code>
</pre>

            </div>
            <div>
                <h4>Rendered HTML</h4>
                <ul class="disc">
                    <li>List item with a much longer description or
                        more content.</li>
                    <li>List item</li>
                    <li>List item
                        <ul>
                            <li>Nested list item</li>
                            <li>Nested list item</li>
                            <li>Nested list item</li>
                        </ul>
                    </li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                </ul>
            </div>
        </div>

        <div>
            <div>
                    <h4>HTML</h4>
                    
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">&quot;circle&quot;</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item with a much longer description or more content.<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item
    <span class="tag">&lt;<span class="title">ul</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
<span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
</div></code>
</pre>

            </div>
            <div>
                <h4>Rendered HTML</h4>
                <ul class="circle">
                    <li>List item with a much longer description or
                        more content.</li>
                    <li>List item</li>
                    <li>List item
                        <ul>
                            <li>Nested List Item</li>
                            <li>Nested List Item</li>
                            <li>Nested List Item</li>
                        </ul>
                    </li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                </ul>
            </div>
        </div>

        <div>
            <div>
                <h4>HTML</h4>
                
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">&quot;square&quot;</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item with a much longer description or more content.<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item
    <span class="tag">&lt;<span class="title">ul</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
<span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
</div></code>
</pre>

            </div>
            <div>
                <h4>Rendered HTML</h4>
                <ul class="square">
                    <li>List item with a much longer description or
                        more content.</li>
                    <li>List item</li>
                    <li>List item
                        <ul>
                            <li>Nested List Item</li>
                            <li>Nested List Item</li>
                            <li>Nested List Item</li>
                        </ul>
                    </li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                </ul>
            </div>
        </div>

        <div>
            <div>
                <h4>HTML</h4>
                
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">&quot;no-bullet&quot;</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item with a much longer description or more content.<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item
    <span class="tag">&lt;<span class="title">ul</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
<span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
</div>
</code>
</pre>

            </div>
            <div>
                <h4>Rendered HTML</h4>
                <ul class="no-bullet">
                    <li>List item with a much longer description or
                        more content.</li>
                    <li>List item</li>
                    <li>List item
                        <ul>
                            <li>Nested List Item</li>
                            <li>Nested List Item</li>
                            <li>Nested List Item</li>
                        </ul>
                    </li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                </ul>
            </div>
        </div>

        <div>
            <div>
                <h4>HTML</h4>
                
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">ol</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item with a much longer description or more content.<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item
    <span class="tag">&lt;<span class="title">ol</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
        <span class="tag">&lt;<span class="title">li</span>&gt;</span>Nested List Item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">ol</span>&gt;</span>
    <span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span>List item<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
<span class="tag">&lt;/<span class="title">ol</span>&gt;</span>
</div></code>
</pre>

            </div>
            <div>
                <h4>Rendered HTML</h4>
                <ol>
                    <li>List item with a much longer description or
                        more content.</li>
                    <li>List item</li>
                    <li>List item
                        <ol>
                            <li>Nested List Item</li>
                            <li>Nested List Item</li>
                            <li>Nested List Item</li>
                        </ol>
                    </li>
                    <li>List item</li>
                    <li>List item</li>
                    <li>List item</li>
                </ol>
            </div>
        </div>

        <div>
            <div>
                <h4>HTML</h4>
                
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">dl</span>&gt;</span>
    <span class="tag">&lt;<span class="title">dt</span>&gt;</span>Definition Title<span class="tag">&lt;/<span class="title">dt</span>&gt;</span>
    <span class="tag">&lt;<span class="title">dd</span>&gt;</span>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.<span class="tag">&lt;/<span class="title">dd</span>&gt;</span>
<span class="tag">&lt;/<span class="title">dl</span>&gt;</span>
</div></code>
</pre>

            </div>
            <div>
                <h4>Rendered HTML</h4>
                <dl>
                    <dt>Definition Title</dt>
                    <dd>Definition Cras justo odio, dapibus ac
                        facilisis in, egestas eget quam. Nullam id dolor
                        id nibh ultricies vehicula ut id elit.</dd>
                </dl>
            </div>
        </div>

        <hr>
        <p>
            <a name="blockquotes"></a>
        </p>
        <h3 id="blockquotes">Blockquotes</h3>
        <p>Sometimes other people say smart things, and you may want
            to mention that through a blockquote callout. We&#39;ve got
            you covered.</p>
        <div>
            <div>
                <h4>HTML</h4>
                
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">blockquote</span>&gt;</span>Those people who think they know everything are a great annoyance to those of us who do.<span class="tag">&lt;<span class="title">cite</span>&gt;</span>Isaac Asimov<span class="tag">&lt;/<span class="title">cite</span>&gt;</span><span class="tag">&lt;/<span class="title">blockquote</span>&gt;</span>
</div></code>
</pre>

            </div>
            <div>
                <h4>Rendered HTML</h4>
                <blockquote>
                    Those people who think they know everything are a
                    great annoyance to those of us who do.<cite>Isaac
                        Asimov</cite>
                </blockquote>
            </div>
        </div>

        <hr>
        <h3 id="v-cards">V-Cards</h3>
        <p>
            Here&#39;s a handy microformat-friendly list to <em>address</em>
            all your needs.
        </p>
        <div>
            <div>
                <h4>HTML</h4>
                
<pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">&quot;vcard&quot;</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span> <span class="attribute">class</span>=<span class="value">&quot;fn&quot;</span>&gt;</span>Gaius Baltar<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span> <span class="attribute">class</span>=<span class="value">&quot;street-address&quot;</span>&gt;</span>123 Colonial Ave.<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span> <span class="attribute">class</span>=<span class="value">&quot;locality&quot;</span>&gt;</span>Caprica City<span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span>&gt;</span><span class="tag">&lt;<span class="title">span</span> <span class="attribute">class</span>=<span class="value">&quot;state&quot;</span>&gt;</span>Caprica<span class="tag">&lt;/<span class="title">span</span>&gt;</span>, <span class="tag">&lt;<span class="title">span</span> <span class="attribute">class</span>=<span class="value">&quot;zip&quot;</span>&gt;</span>12345<span class="tag">&lt;/<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">li</span>&gt;</span>
    <span class="tag">&lt;<span class="title">li</span> <span class="attribute">class</span>=<span class="value">&quot;email&quot;</span>&gt;</span><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">&quot;#&quot;</span>&gt;</span><a class="__cf_email__" href="http://www.cloudflare.com/email-protection" data-cfemail="9afdb4f8fbf6eefbe8daffe2fbf7eaf6ffb4f9f5f7">[email&nbsp;protected]</a><span class="tag">&lt;/<span class="title">a</span>&gt;</span><span class="tag">&lt;/<span class="title">li</span>&gt;</span>
<span class="tag">&lt;/<span class="title">ul</span>&gt;</span>
</div></code>
</pre>

            </div>
            <div>
                <h4>Rendered HTML</h4>
                <div class="type-demo">
                    <ul class="vcard">
                        <li class="fn">Gaius Baltar</li>
                        <li class="street-address">123 Colonial
                            Ave.</li>
                        <li class="locality">Caprica City</li>
                        <li><span class="state">Caprica</span>, <span
                            class="zip">12345</span></li>
                        <li class="email"><a href="#"><span
                                class="__cf_email__"
                                data-cfemail="9cfbb2fefdf0e8fdeedcf9e4fdf1ecf0f9b2fff3f1">[email&nbsp;protected]</span>
                            <script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script></a></li>
                    </ul>
                </div>
            </div>
        </div>

        <h3 id="print-styles">Print Styles</h3>
        <p>Foundation includes print styles developed by HTML5
            Boilerplate to give you some basic print-specific styles.
            These are activated when you print through a media query. It
            includes:</p>
        <ul>
            <li>Clearing out backgrounds, box shadows and text
                shadows</li>
            <li>Appending link URLs after the anchor text</li>
            <li>Bordering blockquotes and pre elements</li>
            <li>Page cleanup and window minimization</li>
        </ul>
        <p>
            On top of that, Foundation includes a couple of simple
            classes you can use to control elements printing, or not
            printing. Simply attach
            <code>.show-for-print</code>
            to an element to only show when printing, and
            <code>.hide-for-print</code>
            to hide something when printing.
        </p>
    </div>
        
</wicket:extend>
</body>
</html>
